<template>
<div>
  <div class="footer">
    <ul>
      <li :class="{checked:tag,unchecked:!tag}" @click="changeTag">
        <van-icon name="home" info="9" />
        <a href="/pages/index/main">首页</a>
      </li>
      <li :class="{checked:tag,unchecked:!tag}" @click="changeTag">
        <a href="/pages/shopChart/main">购物车</a>
      </li>
      <li :class="{checked:tag,unchecked:!tag}" @click="changeTag">
        <a href="/pages/mine/main">我的</a>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
    export default {
        name:"pageFooter",
      data(){
          return{
            tag:true
          }
      },
      methods:{
        changeTag(){
          this.tag=!this.tag;
        }
      },
      props:["type"],
      mounted(){
         /* document.getElementsByTagName("li")[this.type].style.color='#333';*/
      }
    }
</script>

<style scoped lang="scss">
.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: #fff;
    ul{
      display: flex;
      li{
        flex: 1;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color: #666;
      }
    }
}
.checked{
  color: #333;
  font-size: 18px;
}
.unchecked{
  color: #666;
  font-size: 16px;
}
</style>
